<template>
  <div class="leave">
    <div class="hint">
      留下你机遇信息,让机遇来找你
      <div class="hint-item">
        <i class="el-icon-warning"></i>注意:最多5个标签，每个标签字数限制10
      </div>
    </div>
    <!-- 添加标签区域 -->
    <div class="item">
      <el-tag
        color="#008c8c"
        :key="tag"
        v-for="tag in dynamicTags"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)"
        effect="dark"
      >{{tag}}</el-tag>
      <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="medium"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
      ></el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 留下机遇</el-button>
    </div>
    <div class="save">
      <button title="发布机遇" @click="publishluck" :disabled="dynamicTags.length === 0">发布机遇</button>
    </div>
  </div>
</template>

<script>
// 引入第三方库dayjs
import dayjs from "dayjs";
export default {
  data() {
    return {
      dynamicTags: [], //标签数组 为0是无法发布的
      inputVisible: false, //控制输入框和标签的切换
      inputValue: "", //输入框的内容
      luckData: {}, //发布机遇数据
    };
  },
  mounted() {
    // 获取个人机遇信息
    this.getluckinfo();
  },
  methods: {
    // 关闭标签回调
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    // 显示添加标签框
    showInput() {
      if (this.dynamicTags.length >= 5) {
        return this.$message({
          type: "error",
          message: "已达到最大标签数(5)",
        });
      }
      this.inputVisible = true;
      // 这里使用$nextTick是为了让页面渲染完成后再去聚焦
      this.$nextTick((_) => {
        // 自动获取焦点
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    // 失去焦点和enter按键回调
    handleInputConfirm() {
      let inputValue = this.inputValue;
      // 判断长度不能大于10
      if (inputValue.length > 10) {
        this.inputVisible = false;
        this.inputValue = "";
        return this.$message({
          type: "error",
          message: "已达到最大内容长度(10)",
        });
      }
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    // 获取个人机遇信息回调
    async getluckinfo() {
      let result = await this.$API.getluckinfo();
      // 判断
      if (result.code === 200) {
        this.luckData = result.data;
        this.dynamicTags = result.data.content;
      } else {
        // 再次发送获取个人信息的请求 等页面加载完成再去获取，避免白屏时间太长
        this.$nextTick(() => {
          this.getUserinfo();
        });
      }
    },
    // 获取个人信息回调
    async getUserinfo() {
      let { luckData } = this;
      let result = await this.$API.getUserinfo();
      if (result.code === 200) {
        let { uuId, nickname, gender, user_pic } = result.data;
        luckData = Object.assign(luckData, {
          uuId,
          nickname,
          gender,
          user_pic,
        });
      }
    },
    // 发布机遇回调
    async publishluck() {
      // console.log("发布");
      // 整理参数
      let { dynamicTags, luckData } = this;
      luckData.content = dynamicTags; //赋值所有标签
      luckData.timer = dayjs().format("YYYY-MM-DD HH:mm:ss");
      let result = await this.$API.publishluck(luckData);
      if (result.code === 200) {
        this.$message({
          type: "success",
          message: "发布成功,请等待你的机遇到来吧",
        });
      }
    },
  },
};
</script>

<style>
/* element ul tag标签样式 */
.el-tag + .el-tag {
  margin-left: 10px;
  border: none;
}
.el-tag--dark {
  border: none;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>

<style lang="less" scoped>
.leave {
  position: relative;
  .hint {
    padding: 10px 0;
    color: #008c8c;
    font-weight: 700;
    .hint-item {
      font-size: 12px;
      font-weight: 500;
      color: #ff3333;
    }
  }
  .item {
    padding: 10px 0;
    border-bottom: 1px dotted #008c8c;
    display: flex;
    justify-content: space-around;
    .info {
      font-size: 14px;
      color: #a2b6aa;
      input {
        width: 40px;
        text-align: center;
      }
    }
  }
  .save {
    padding: 10px 0;
    margin-right: 20px;
    text-align: right;
    button {
      border-radius: 10px;
      background: #008c8c;
      color: #fff;
      border: none;
      padding: 5px 5px;
      cursor: pointer;
    }
  }
}
</style>